<template>
  <div class="container">
    <p class="font18 color333 bolder mb30">等待</p>
    <div class="tab-container tab-container-noPadding">
      <el-tabs type="border-card">
        <div>
          <div class="form-group" v-if="waitForm.waitType == 1">
            <label class="color333 font16" >立即触发</label>
            <div class="color333">
            </div>
          </div>
          <div class="form-group" v-if="waitForm.waitType == 2">
            <label class="color333 font16" >等待触发：</label>
            <span class="color333"> {{nodeName}} </span>
          </div>
        </div>
      </el-tabs>
    </div>
    <div class="save t_c mt40">
      <el-button class="searchButton" @click="handleClose">确定</el-button>
    </div>
  </div>
</template>

<script>
// 自动化营销-----等待组件
export default {
  name: "waitInfo",
  components: {},
  props: {
    nodeInfo: {
      type: Object
    },
    journeyId: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      nodeName: null,
      waitForm: {
        waitType: 1,
        waitTime: null,
        waitPeriod: 1
      },

      waitPeriodOptions: [
        { value: 1, label: "分钟" },
        { value: 2, label: "小时" },
        { value: 3, label: "天" },
        { value: 4, label: "周" },
        { value: 5, label: "月" }
      ],
    };
  },

  methods: {
    //取消按钮
    handleClose() {
      this.$emit("handleClose");
    },

    //回显
    showDetail(){
      let waitPeriodName = "";
      if(this.waitForm.waitType == 1){
        this.nodeName = "立即触发";
      }else if(this.waitForm.waitType == 2 && this.waitForm.waitTime != null){
        if(this.waitForm.waitPeriod == 1){
          waitPeriodName = "分钟";
        }else if(this.waitForm.waitPeriod == 2){
          waitPeriodName = "小时";
        }else if(this.waitForm.waitPeriod == 3){
          waitPeriodName = "天";
        }else if(this.waitForm.waitPeriod == 4){
          waitPeriodName = "周";
        }else if(this.waitForm.waitPeriod == 5) {
          waitPeriodName = "月";
        }
        this.nodeName = this.waitForm.waitTime + waitPeriodName;
      }
    },

    //初始化
    getBranchNodeDetail: function() {
      let this_ = this;
      let param = {};
      param.branchNodeId = this_.nodeInfo.nodeId;
      this.utils.request.getBranchNodeDetail(param, function(res) {
        if (res.code == "0000") {
          if (res.data.nodeVariable != null) {
            JSON.parse(res.data.nodeVariable, function(key, value) {
              if (key == "waitType" && value != null) {
                this_.waitForm.waitType = value;
              }
              if (key == "waitTime" && value != null) {
                this_.waitForm.waitTime = value;
              }
              if (key == "waitPeriod" && value != null) {
                this_.waitForm.waitPeriod = value;
              }
            });
            this_.showDetail();
          }
        } else {
        }
      });
    },

  },
  created() {
  },
  mounted() {
    this.getBranchNodeDetail();
  }
};
</script>
<style lang="scss" scoped>
  .font18{
    font-size:18px
  }
  .bolder{
    font-weight: 500;
  }
  .mr60{
    margin-right: 60px !important;
  }
  /deep/ .el-radio__label{
    font-size: 16px !important;
  }
  .font12{
    font-size: 12px !important;
  }
  .mt40{
    margin-top: 40px;
  }
/deep/  .w250{
  width: 250px !important;
  .el-input__inner{
  width: 250px !important;
  }
  }
  /deep/.noMargin{
    margin-right: 0 !important;
    .el-form-item__content{
      margin-right: 10px !important;
    }
  }
</style>

